<template>
    <div class="adddata">
        <!-- 秒杀活动设置商品 -->
        <div class="title">
            <el-icon>
                <Tickets />
            </el-icon>
            <h3>数据列表</h3>
        </div>
        <div>
        </div>
    </div>
    <div class="tables">
        <!-- 数据的展示 -->
        <el-table align="center" :data="tableData" style="width: 100%;" border>
            <el-table-column align="center" prop="id" label="编号" width="100" />
            <el-table-column align="center" prop="name" label="秒杀时间段名称" width="333" />
            <el-table-column align="center" label="每日开始时间" width="333">
                <template #default="scope">
                    <div>
                        {{ scope.row.startTime ? dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="每日结束时间" width="333">
                <template #default="scope">
                    <div>
                        {{ scope.row.endTime ? dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="productCount" label="商品数量" width="333">
            </el-table-column>
            <el-table-column align="center" label="操作" width="180" flex="right">
                <template #default="scope">
                    <div>
                        <span @click="productListFn(scope.row.id)">商品列表</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { Ref } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
// 导入接口
import * as api from '../../request/api'
// 导入接口类型
import { IFlashSelectListQuery, IFlashSelectList } from '../../request/SmsAdminConreiller'
import router from '../../router'
// 获取路由参数
let route: any = useRoute().query
console.log(route.flashPromotionId);

// 商品列表
let productListFn = (id: any) => {
    // 点击秒杀活动设置商品的商品列表进入商品列表页
    console.log(id);

    router.push({
        path: '/sms/flashProductRelation',
        query: {
            flashPromotionId: route.flashPromotionId,
            flashPromotionSessionId: id
        }
    })
}

let tableData: Ref<any> = ref([])
// 发起请求获取秒杀活动设置商品数据
let flashSelectSession = async (val: IFlashSelectListQuery) => {
    let flashSelectSessionItem = await api.flash.getFlashSelectList(val)
    tableData.value = flashSelectSessionItem
    return tableData
}
flashSelectSession(route)
console.log(tableData);

</script>

<style scoped lang="scss">
.adddata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin-top: 60px;
    margin-bottom: 20px;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .ei {
        display: flex;
        align-items: center;

        h3 {
            color: #303133;
            font-size: 14px;
            margin-left: 10px;
        }
    }

    h3 {
        color: #303133;
        font-size: 14px;
        margin-left: 10px;
    }
}

.tables {
    .pagination {
        margin: 20px 0;
        padding-right: 20px;
        float: right;
    }

    span {
        color: #409eff;
        cursor: pointer;
    }

    .bianji {
        margin: 0 5px;
    }

    .users {
        color: #409eff;
        font-size: 12px;

        &:hover {
            color: rgba(64, 158, 255, 0.7);
            cursor: pointer;
        }
    }
}
</style>